<template>
    <component is="a-modal" v-model:visible="visible" width="70%" :title="title" :mask-closable="false"
      :ok-loading="loading" @cancel="close" @before-ok="submit">
      <a-spin :loading="spinLoading" tip="获取数据中" style="width: 100%;">
        <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
          <a-form-item label="售后ID" field="after_order_id">
            <a-input v-model="formData.after_order_id" placeholder="请输入" @blur="getData" />
          </a-form-item>
          <a-form-item label="操作密码" field="admin_pay_password">
            <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="谷歌验证码" field="google_code">
            <a-input v-model="formData.google_code" placeholder="请输入" />
          </a-form-item>
        </a-form>
        <div v-if="tableData && tableData.length > 0">
          <a-space>
            <a-button type="primary" size="mini" @click="add">添加</a-button>
          </a-space>
          <div style="height: 70vh;overflow: auto;">
            <a-table ref="crudRef" :data="tableData" :columns="columns" :pagination="false" :stripe="false">
              <template #goods_name="{ record }">
                <sa-select style="width: 60%;" v-model="record.order_goods_id" :data="select_list"
                  :fieldNames="{ value: 'id', label: 'goods_name' }"></sa-select>
              </template>
              <template #operation="{ record, rowIndex }">
                <a-button class="red_color" type="primary" size="mini" mode="round" @click="del(rowIndex)">删除</a-button>
              </template>
            </a-table>
          </div>
        </div>
      </a-spin>
    </component>
  </template>
  <script setup>
  import { onMounted, ref, reactive, computed, watch } from 'vue'
  import funApi from '@/api/message/tool'
  import SaSelect from '@cps/sa-select/index.vue'
  import { Message } from '@arco-design/web-vue'
  import { throttle } from 'lodash';
  import tool from '@/utils/tool'
  const spinLoading = ref(false)
  const emit = defineEmits(["success"]);
  const formRef = ref()
  const visible = ref(false);
  const title = ref('')
  const loading = ref(false);
  const formData = reactive({
    after_order_id: '',
    admin_pay_password: '',
    google_code: '',
  })
  const rules = ref({
    after_order_id: [{ required: true, message: '请输入' }],
    state: [{ required: true, message: '请输入' }],
    admin_pay_password: [{ required: true, message: '请输入' }],
    google_code: [{ required: true, message: '请输入' }],
  });
  const columns = reactive([
    { title: 'ID', dataIndex: 'id', width: 100, align: 'center' },
    { title: '商品名称', slotName: 'goods_name', width: 180, align: 'center' },
    { title: '数量', dataIndex: 'num', width: 180, align: 'center' },
    { title: '操作', slotName: 'operation', width: 100, align: 'center', },
  ])
  const open = async (data) => {
    visible.value = true;
    formRef.value.resetFields()
    title.value = '修改退货售后记录'
    getParams()
  }
  const tableData = ref([])
  const select_list = ref([])
  const getData = async () => {
    tableData.value = []
    select_list.value = []
    try {
      spinLoading.value = true
      const { data } = await funApi.tool_edit_after_record_search({ after_order_id: formData.after_order_id })
      tableData.value = data.sku_list
      select_list.value = data.goods_list
      spinLoading.value = false
    } catch (err) {
      spinLoading.value = false
    }
  }
  const add = () => {
    tableData.value.push({ order_goods_id: select_list.value[0].id, num: 1, })
  }
  const del = (idx) => {
    tableData.value?.splice(idx, 1)
  }
  const submit = async (done) => {
    const validate = await formRef.value?.validate()
    if (!validate) {
      let after_order_sku_id = []
      let order_goods_id = []
      let flag = false
      if (tableData.value && tableData.value.length > 0) {
        tableData.value.forEach((itm, idx) => {
          after_order_sku_id.push(itm.id?itm.id:0)
          order_goods_id.push(itm.order_goods_id)
          if (idx == tableData.value.length - 1) {
            flag = true
          }
        })
      }
      if (flag == true) {
        try {
          loading.value = true
          let data = { ...formData } 
          data.after_order_sku_id = after_order_sku_id
          data.order_goods_id=order_goods_id
          let result = await funApi.tool_edit_after_record_update(data)
          if (result.code === 200) {
            Message.success('操作成功')
            emit('success')
            done(true)
          }
          setTimeout(() => {
            loading.value = false
          }, 500)
        } catch {
          loading.value = false
          done(false)
        }
      }
  
    }
    done(false)
  
  }
  const paramsData = ref({})
  const getParams = async () => {
    // const { data } = await funApi.tool_edit_exchange_record_config()
    // paramsData.value = { ...data }
  }
  defineExpose({ open });
  </script>